<template>
	<div class="bg-white">

		<div class="m-2 shadow rounded">
			<div class="bg-primary p-2 d-flex justify-content-between align-items-center">
				<span class="text-white">基础数据</span>
				<Button @click="submit" type="warning" size="small">保存</Button>
			</div>
			<div class="p-2">
				<Form :label-width="80">
					<Row class="w-100">
						<!-- 门店基本信息开始 -->
						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="w-50" label="门店名" prop="name">
							<Input v-model="astore.name" placeholder="请输入门店名"></Input>
						</FormItem>
						</Col>

						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="地址" prop="mddz">
							<Input v-model="astore.mddz" placeholder="请输入地址"></Input>
						</FormItem>
						</Col>
						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="负责人" prop="fzr">
							<Input v-model="astore.fzr" placeholder="请输入负责人名称"></Input>
						</FormItem>
						</Col>
						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="联系电话" prop="lxdh">
							<Input v-model="astore.lxdh" placeholder="请输入门店联系电话"></Input>
						</FormItem>
						</Col>
						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<!-- 提交封面文件 -->
						<FormItem class="" label="封面" prop="cover">
							<div>
								<img :src="astore.cover" />
							</div>
							<div class="p-2">
								<input @change="changeFile" id="mdcover" class="d-none" type="file" />
								<label for="mdcover">
									<span class="btn btn-primary">选择文件</span>
								</label>
							</div>
						</FormItem>
						</Col>
						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem label="门店状态">
							<Select v-model="astore.actflg">
								<Option :key="key" :value="item.mdcode" v-for="(item, key) in storeStatus">{{item.mdvalue}}
								</Option>
							</Select>
						</FormItem>
						</Col>
						<Col :xxl="12" :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
						<FormItem class="" label="描述" prop="ms">
							<Input type="textarea" v-model="astore.ms" placeholder="请输入描述"></Input>
						</FormItem>
						</Col>

						<!-- 省市区下拉框 -->
						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="w-50" label="省">
							<Select v-model="astore.sheng" placeholder="请选择省" @on-change="changeSheng">
								<Option v-for="item in shengs" :key="item.code" :value="item.code">{{ item.label}}
								</Option>
							</Select>
						</FormItem>
						</Col>
						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="w-50" label="市">
							<Select v-model="astore.shi" placeholder="请选择市" @on-change="changeShi">
								<Option v-for="item in shis" :key="item.code" :value="item.code">{{ item.label}}
								</Option>
							</Select>
						</FormItem>
						</Col>

						<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="w-50" label="区">
							<Select v-model="astore.qu" placeholder="请选择区" @on-change="changeQu">
								<Option v-for="item in qus" :key="item.code" :value="item.code">{{ item.label}}</Option>
							</Select>
						</FormItem>
						</Col>
					</Row>


					<!-- 经纬度显示 -->
					<Row class="w-100">
						<Col>
						<FormItem class="" label="">
							<div>
								<span>纬度：{{astore.wd}}</span>
								<span>/</span>
								<span>经度：{{astore.jd}}</span>
							</div>
							<!-- 创建腾讯地图容器 -->
							<div id="txmap" style="height: 400px" class="w-100 border">
							</div>
						</FormItem>
						</Col>
					</Row>
					<!-- 门店基本信息结束 -->




					<!-- 小程序、商户信息开始 -->
					<Row class="w-100">
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="小程序appid" prop="appid">
							<Input v-model="astore.appid"></Input>
						</FormItem>
						</Col>
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="小程序秘钥" prop="secretkey">
							<Input v-model="astore.secretkey"></Input>
						</FormItem>
						</Col>
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="商户id" prop="nid">
							<Input v-model="astore.nid"></Input>
						</FormItem>
						</Col>
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="商户支付证书序列号" prop="zsxlh">
							<Input v-model="astore.zsxlh"></Input>
						</FormItem>
						</Col>
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="商户支付私钥" prop="zfsy">
							<Input v-model="astore.zfsy"></Input>
						</FormItem>
						</Col>
						<Col :xxl="8" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem class="" label="商户支付秘钥3版本" prop="zfv3apikey">
							<Input v-model="astore.zfv3apikey"></Input>
						</FormItem>
						</Col>
						<!-- 小程序、商户信息结束 -->
					</Row>
				</Form>
			</div>
		</div>


		<!-- 房间表单开始-->
		<div class="m-2 shadow rounded">
			<!-- 房间模块头部标题 -->
			<div class="bg-shuilan p-2 d-flex justify-content-between align-items-center">
				<span class="text-white">房间</span>
				<div class="d-flex align-items-center">
					<Button type="error" size="small" @click="newFj">新增</Button>
				</div>
				<!--	<Button type="primary" size="small" @click="sbsubmit">保存</Button>-->
			</div>
			<div>
				<Table border :columns="tableInfo.columns" :data="tableInfo.roomdata">
					<template slot-scope="{ row, index }" slot="action">
						<Button type="primary" size="small" class="mr-2" @click="showFj(row.roomid)">详细</Button>
						<Button type="error" size="small" @click="removeFj(row.roomid)">删除</Button>
					</template>
				</Table>
			</div>
		</div>
		<!-- 房间表单结束-->


		<!-- 会员 -->
		<!-- <div class="m-2 shadow rounded">
				<div>
					<hy></hy>
				</div>
			</div> -->

		<!-- 会员信息开始 -->
		<div class="m-2 shadow rounded">
			<div class="bg-shuilan p-2 d-flex justify-content-between align-items-center">
				<span class="text-white">会员信息</span>
			</div>

			<div class="p-2">
				<div class="mt-1">
					<Table border :class="'m-1'" :columns="hytableInfo.columns" :data="hytableInfo.hydata">
						<template slot-scope="{ row, index }" slot="headimg">
							<div>
								<img style="width: 40px; height: 40px;" :src="row.headimg" />
							</div>
						</template>
						<template slot-scope="{ row, index }" slot="clientName">
							<div>{{ row.clientName }}</div>
						</template>
						<template slot-scope="{ row, index }" slot="action">
							<Button type="primary" size="small" class="mr-2" @click="showHy(row.vipid)">详细</Button>
							<Button type="error" size="small" @click="removeHy(row.vipid)">删除</Button>
						</template>
					</Table>
				</div>

			</div>
		</div>
		<!-- 会员信息结束 -->

		<!-- 订单信息开始 -->
		<div class="m-2 shadow rounded">
			<div class="bg-shuilan p-2 d-flex justify-content-between align-items-center">
				<span class="text-white">订单信息</span>
			</div>
			<div class="p-2">
				<div class="mt-1">
					<Table border :class="'m-1'" :columns="ddtableInfo.columns" :data="ddtableInfo.dddata">
						<template slot-scope="{ row, index }" slot="headimg">
							<div>
								<img style="width: 40px; height: 40px;" :src="row.headimg" />
							</div>
						</template>
						<template slot-scope="{ row, index }" slot="clientName">
							<div>{{ row.clientName }}</div>
						</template>
						<template slot-scope="{ row, index }" slot="action">
							<Button type="primary" size="small" class="mr-2" @click="showDd(row.orderid)">详细</Button>
							<Button type="error" size="small" @click="removeDd(row.orderid)">删除</Button>
						</template>
					</Table>
				</div>
			</div>
		</div>
		<!-- 订单信息结束 -->
	</div>
</template>

<script>
	//引入组件
	//import fj from '../fj/list.vue'
	//import hy from '../hy/list.vue'

	export default {
		// name:'hy',
		// components:{
		// 	// 在components属性中注册组件

		// 	hy
		// },

		data() {
			return {
				//存放地图实例
				map: null,
				//存放图层点标记实例
				markerLayer: null,
				astore: {
					name: "", //门店名
					mddz: "", //门店地址
					fzr: "", //负责人
					lxdh: "", //联系电话
					cover: "", //封面
					jd: "0", //经度
					wd: "0", //纬度
					ms: "", //门店描述
					sheng: "", //省
					shi: "", //市
					qu: "", //区

					actflg: "", //开店状态
					appid: "", //小程序appid
					secretkey: "", //小程序秘钥
					nid: "", //商户id
					zsxlh: "", //商户支付证书序列号
					zfsy: "", //商户支付私钥
					zfv3apikey: "", //商户支付密钥3版本
					imgs: [], //图片数组
				},
				//门店状态
				storeStatus: [],
				//存放省数组
				shengs: [{
						code: "1",
						label: "黑龙江省"
					},
					{
						code: "2",
						label: "广西省"
					},

				],
				//存放市数组
				shis: [{
						code: "1",
						label: "哈尔滨"
					},
					{
						code: "2",
						label: "绥化市"
					}, {
						code: "3",
						label: "南宁市"
					}, {
						code: "4",
						label: "桂林市"
					},
				],
				//存放区数组
				qus: [{
						code: "1",
						label: "呼兰区"
					},
					{
						code: "2",
						label: "北林区"
					},
					{
						code: "3",
						label: "青秀区"
					},
					{
						code: "4",
						label: "叠彩区"
					},
				],

				//房间列表
				tableInfo: {
					columns: [{
							title: "房间编号",
							key: "roomid",
						},
						{
							title: '房间单价/分钟',
							key: 'price'
						},
						{
							title: '名称',
							key: 'roomname'
						},
						{
							title: '描述',
							key: 'ms'
						},
						{
							title: '操作',
							slot: 'action'
						}
					],
					roomdata: []
				},

				//会员列表
				hytableInfo: {
					columns: [{
							title: "会员编号",
							key: "vipid",
						},
						{
							title: "所属门店",
							key: "storeid",
						},
						{
							title: "客户id",
							key: "clientid",
						},
						{
							title: "客户姓名",
							slot: "clientName",
						},
						{
							title: "开始时间",
							key: "st",
						},

						{
							title: "结束时间",
							key: "et",
						},
						{
							title: "总分钟数",
							key: "zsc",
						},
						{
							title: "剩余分钟数",
							key: "sysc",
						},
						{
							title: "操作",
							slot: "action",
						}
					],
					hydata: []
				},

				//订单数据
				ddtableInfo: {
					columns: [{
							title: "订单编号",
							key: "orderid",
						},
						{
							title: "门店id",
							key: "storeid",
						},
						{
							title: "客户id",
							key: "clientid",
						},
						{
							title: "客户姓名",
							slot: "clientName",
						},
						{
							title: "商品id",
							key: "productid",
						},
						{
							title: "商品价格",
							key: "productPrice",
						},
						{
							title: "商品名称",
							key: "productName",
						},
						{
							title: "数量",
							key: "count",
						},
						{
							title: "实付款",
							key: "amount",
						},
						{
							title: "操作",
							slot: "action",
						}
					],
					dddata: []
				},
			}
		},
		props: {
			params: {
				type: Object,
				default: undefined,
			}
		},
		created: function() {
			this.astore.storeid = this.$route.query.id;
		},
		mounted: function() {
		this.loadStoreStatu().then(this.loadData).then(this.init).then(this.loadFj).then(this.loadHy).then(this.loadDd);

		},
		methods: {
			//门店信息
			loadData: function() {
				return this.http.get({
					url: "/md/info",
					param: {
						storeid: this.astore.storeid
					}
				}).then(res => {
					console.log(res);
					this.astore = res;
				});
			},
			//门店状态
			loadStoreStatu: function() {
				return this.http.get({
					url: "/dict/all",
					param: {
						type: "STORESTATU"
					}
				}).then(data => {
					this.storeStatus = data.mdStatusList;
				});
			},
			
			submit: function() {
				if (this.astore.name === "") {
					this.message.error("请输入门店名");
					return;
				}

				this.message.confirm({
					title: "保存提示",
					content: "即将修改门店，确定吗？",
					onOk: () => {
						this.http.put({
							url: "/md/info",
							data: this.astore
						}).then(res => {
							this.message.info("修改成功");
							//this.$tabs.close();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},

			//初始化地图
			init: function() {
				//定义地图中心点坐标
				//在 TMap 中，构造函数 TMap.LatLng 的参数顺序通常是经度在前，纬度在后
				var center = new TMap.LatLng(parseFloat(this.astore.jd), parseFloat(this.astore.wd))
				//定义map变量，调用 TMap.Map() 构造函数创建地图
				this.map = new TMap.Map(document.getElementById('txmap'), {
					center: center, //设置地图中心点坐标
					zoom: 17.2, //设置地图缩放级别
					pitch: 43.5, //设置俯仰角
					rotation: 45 //设置地图旋转角度
				});
				this.removeMarker();
				this.createMarker();

				//绑定点击事件
				//var self = this;
				this.map.on("click", evt => {
					//lat纬度
					var lat = evt.latLng.getLat().toFixed(6);
					//lng经度
					var lng = evt.latLng.getLng().toFixed(6);
					//更新经纬度
					// self.astore.wd = lat;
					// self.astore.jd = lng;
					this.astore.wd = lat;
					this.astore.jd = lng;
					console.log("纬度：" + this.astore.wd);
					console.log("经度：" + this.astore.jd);
					//调用点标记方法，先删除后添加
					this.removeMarker();
					this.createMarker();

				});
			},

			//添加点标记
			createMarker: function() {
				//根据经纬度参数创建点标记
				let position = new TMap.LatLng(parseFloat(this.astore.jd), parseFloat(this.astore.wd));
				//创建标记层
				console.log("位置：" + position);
				this.markerLayer = new TMap.MultiMarker({
					id: 'marker-layer',
					map: this.map,
					geometries: [{
						"id": 'demo',
						"styleId": 'marker',
						"position": position,
						"properties": {
							"title": "marker"
						}
					}]
				});
				//动态设置地图中心点
				this.map.setCenter(position);
			},

			//删除点标记
			//移除marker事件
			removeMarker: function() {
				if (this.markerLayer) {
					this.markerLayer.setMap(null);
					this.markerLayer = null;
				}
			},



			//上传图片文件
			changeFile: function(event) {
				console.log(event.target.files);
				if (event.target.files && event.target.files.length > 0) {
					this.loadFile(event.target.files[0]);
				}
			},
			loadFile: function(file) {
				const reader = new FileReader();
				reader.onload = e => {
					const content = e.target.result;
					// 处理文件内容
					// this.$emit("success", content);
					console.log(content);

					this.astore.cover = content;
				};
				reader.onerror = function(e) {
					console.error("读取文件时发生错误:", e.target.error);
				};
				reader.readAsDataURL(file);



				this.http.uploadFile({
					path: "/md/cover/",
					file,
					onProgress: progressData => {
						console.log(progressData);
					}
				}).then(res => {
					console.log(res);
				});

			},



			//请求房间数据
			loadFj: function() {
				//1:发送get请求至url地址
				return this.http.get({
					url: "/fj/page",
					param: {}
				}).then(data => {
					console.log(data);
					//2:获取数据：给data数组复制拿到数据
					this.tableInfo.roomdata = data.records;
				});
			},
			//房间详细查看
			showFj: function(roomId) {
				this.$router.push({
					path: "/fj/detail?roomId=" + roomId
				})
			},

			//房间新增
			newFj: function() {
				this.$router.push({
					path: "/fj/new"
				})
			},

			//房间删除
			removeFj: function(roomId) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除此房间，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/fj/info",
							param: {
								roomId
							}
						}).then(data => {
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			//房间查询更新
			search: function() {
				this.http.get({
					url: "/fj/page",
					param: {
						// 传一个当前页
						// current: this.tableInfo.currentPage,
						// size: this.tableInfo.pageSize,
					}
				}).then(data => {
					this.tableInfo.roomdata = data.records;
				});
			},

			//请求会员数据	
			loadHy: function() {
				//1:发送get请求至url地址
				return this.http.get({
					url: "/hy/page",
					param: {}
				}).then(data => {
					console.log(data);
					//2:获取数据：给data数组复制拿到数据
					this.hytableInfo.hydata = data.records;
				});
			},
			//详细查看
			showHy: function(vipId) {
				this.$router.push({
					path: "/hy/detail?vipId=" + vipId
				})
			},

			//会员删除
			removeHy: function(vipId) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除此会员，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/hy/info",
							param: {
								vipId
							}
						}).then(data => {
							this.Hysearch();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			//更新查询
			Hysearch: function() {
				this.http.get({
					url: "/hy/page",
					param: {
						// 传一个当前页
						// current: this.tableInfo.currentPage,
						// size: this.tableInfo.pageSize,
					}
				}).then(data => {
					this.hytableInfo.hydata = data.records;
				});
			},

			//请求订单数据
			loadDd: function() {
				//1:发送get请求至url地址
				return this.http.get({
					url: "/dd/page",
					param: {}
				}).then(data => {
					console.log(data);
					//2:获取数据：给data数组复制拿到数据
					this.ddtableInfo.dddata = data.records;
				});
			},
			//详细查看
			showDd: function(orderId) {
				this.$router.push({
					path: "/dd/detail?orderId=" + orderId
				})
			},


			//订单删除
			removeDd: function(orderId) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除此订单，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/dd/info",
							param: {
								orderId
							}
						}).then(data => {
							this.Ddsearch();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			//更新查询
			Ddsearch: function() {
				this.http.get({
					url: "/dd/page",
					param: {
						// 传一个当前页
						// current: this.tableInfo.currentPage,
						// size: this.tableInfo.pageSize,
					}
				}).then(data => {
					this.ddtableInfo.dddata = data.records;
				});
			},



		},
		//methods结束

	}
</script>

<style>
</style>